﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript钩子函数</title>
</head>
<body>
<!--Velocity和jQuery.animate 的工作方式类似，也是用来实现JavaScript动画的一个很棒的选择-->
<script src="velocity.js"></script>
    <div id="app">
        <button @click="show=!show">点击我</button>
        <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
            v-bind:css="false"
        >
            <p v-if="show">
                Hello, Vue.js!我爱你
            </p>

        </transition>
    </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            // 进入动画之前的样式
            beforeEnter: function(el) {
                // 注意：动画钩子函数的第一个参数：el，表示
                // 要执行动画的那个DOM元素，是一个原生的 JS DOM对象
                // 可以任务， el是通过document.getElementById('') 方式获取到的原生JS DOM对象
                el.style.opacity = 0;   // 设置透明度为0
                el.style.transformOrigin = 'left';   // 指定 transform 原点在元素的 左侧中心点。
            },
            // 进入时的动画
            enter: function(el, done) {
                // Velocity(element, properties, options);
                // element: 要执行动画的DOM元素
                // properties: 要执行的动画效果
                // options: 动画的选项
                Velocity(el, { opacity: 1, fontSize: '2em'}, { duration: 300 });  
                // done: 动画完成的回调函数
                Velocity(el, { fontSize: '1em'}, { complete: done })
            },
            // 离开时的动画
            leave: function(el, done) {
                Velocity(el, { translateX: '15px', rotateZ: '50deg'}, { duration: 600 });
                Velocity(el, { rotateZ: '100deg'}, { loop: 5 });
                Velocity(el, {
                    rotateZ: '45deg',
                    translateY: '30px',
                    translateX: '30px',
                    opacity: 0
                }, { complete: done })
            }
        }
    }).mount('#app')
</script>
</body>
</html>
